<template>
<view>
	
	
		<scroll-view scroll-y="true" style="height: 650rpx;">
	
			<view class="flex-top-start">
				<text class="text-cls p-left20">早上</text>
				<view class="flex-wrap">
					<block v-for="(i, j) in morningData" :key="j">
					
						<view @click="seleTimeMorning(j,i.time)" class="flex" v-if="!i.isDisable"
							:class="{'sel-cls':seleTimeMorningArr.indexOf(i.time)!=-1,'no-cls':seleTimeMorningArr.indexOf(i.time)==-1}">
							{{ i.time }}
						</view>
						<view class="flex disable-cls" v-if="i.isDisable"
							>
							{{ i.time }}
						</view>
					</block>
				</view>
			</view>
	
			<view class="flex-top-start">
				<text class="text-cls p-left20">中午</text>
				<view class="flex-wrap">
					<block v-for="(i, j) in noonData" :key="j">
						<view @click="seleTimeNoon(j,i.time)" class="flex" v-if="!i.isDisable"
							:class="{'sel-cls':seleTimeNoonArr.indexOf(i.time)!=-1,'no-cls':seleTimeNoonArr.indexOf(i.time)==-1}">
							{{ i.time }}
						</view>
						<view class="flex disable-cls" v-if="i.isDisable"
							>
							{{ i.time }}
						</view>
					</block>
				</view>
			</view>
	
			<view class="flex-top-start">
				<text class="text-cls p-left20">下午</text>
				<view class="flex-wrap">
					<block v-for="(i, j) in afternoon" :key="j">
						<view @click="seleTimeAfternoon(j,i.time)" v-if="!i.isDisable" class="flex"
							:class="{'sel-cls':seleTimeAfternoonArr.indexOf(i.time)!=-1,'no-cls':seleTimeAfternoonArr.indexOf(i.time)==-1}">
							{{ i.time}}
						</view>
						<view class="flex disable-cls" v-if="i.isDisable"
							>
							{{ i.time }}
						</view>
					</block>
				</view>
			</view>
	
			<view class="flex-top-start">
				<text class="text-cls p-left20">晚上</text>
				<view class="flex-wrap">
					<block v-for="(i, j) in nightData" :key="j">
						<view @click="seleTimeNight(j,i.time)" class="flex" v-if="!i.isDisable"
							:class="{'sel-cls':seleTimeNightArr.indexOf(i.time)!=-1,'no-cls':seleTimeNightArr.indexOf(i.time)==-1}">
							{{ i.time }}
						</view>
						<view class="flex disable-cls" v-if="i.isDisable"
							>
							{{ i.time }}
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"busyHourSettingFour",
		props:{
			xzTimeFour:String
			// xzTimeOne:'',
			// 			xzTimeTwo:'',
			// 			xzTimeThree:'',
			// 			xzTimeFour:'',
			// 			xzTimeFive:'',
			// 			xzTimeSix:'',
			// 			xzTimeSeven:'',
		},
		data() {
			return {
				morningData: [{
					time: '08:00',
					isDisable: false
				}, {
					time: '08:30',
					isDisable: false
				}, {
					time: '09:00',
					isDisable: false
				}, {
					time: '09:30',
					isDisable: false
				}, {
					time: '10:00',
					isDisable: false
				}, {
					time: '10:30',
					isDisable: false
				}, {
					time: '11:00',
					isDisable: false
				}, {
					time: '11:30',
					isDisable: false
				}, ],
				// 中午
				
				noonData: [{
					time: '12:00',
					isDisable: false
				},{
					time: '12:30',
					isDisable: false
				} ,{
					time: '13:00',
					isDisable: false
				} , {
					time:'13:30',
					isDisable: false
				}],
				// 下午
				afternoon: [{
					time: '14:00',
					isDisable: false
				}, {
					time: '14:30',
					isDisable: false
				},{
					time:'15:00',
					isDisable: false
				}, {
					time:'15:30',
					isDisable: false
				},{
					time:'16:00',
					isDisable: false
				},{
					time: '16:30',
					isDisable: false
				}, {
					time: '17:00',
					isDisable: false
				}, {
					time: '17:30',
					isDisable: false
				},{
					time:'18:00',
					isDisable: false
				}],
				
				
				// 晚上
				nightData: [{
					time: '18:30',
					isDisable: false
				}, {
					time: '19:00',
					isDisable: false
				}, {
					time: '19:30',
					isDisable: false
				}, {
					time: '20:00',
					isDisable: false
				},{
					time: '20:30',
					isDisable: false
				} , {
					time: '21:00',
					isDisable: false
				},  {
					time:'21:30',
					isDisable: false
				}, {
					time:'22:00',
					isDisable: false
				},{
					time:'22:30',
					isDisable: false
				}, {
					time:'23:00',
					isDisable: false
				},{
					time:'23:30',
					isDisable: false
				},{
					time:'00:00',
					isDisable: false
				} ,{
					time:'00:30',
					isDisable: false
				} ,{
					time:'01:00',
					isDisable: false
				},{
					time:'01:30',
					isDisable: false
				}, {
					time:'02:00',
					isDisable: false
				} , {
					time:'02:30',
					isDisable: false
				} , {
					time:'03:00',
					isDisable: false
				}, {
					time:'03:30',
					isDisable: false
				}, {
					time:'04:00',
					isDisable: false
				},{
					time:'04:30',
					isDisable: false
				},{
					time:'05:00',
					isDisable: false
				},{
					time:'05:30', 
					isDisable: false
				},{
					time:'06:00', 
					isDisable: false
				},{
					time:'06:30', 
					isDisable: false
				} , {
					time:'07:00', 
					isDisable: false
				} ,{
					time:'07:30', 
					isDisable: false
				}  
				],
				// 早上的数组
				seleTimeMorningArr: [],
				// 中午的数组
				seleTimeNoonArr: [],
				// 下午数组
				seleTimeAfternoonArr: [],
				// 晚上数组
				seleTimeNightArr: [],
				submitArr:[],
			};
		},
		mounted(){
			this.seleTimeMorningArr= [],
			// 中午的数组
			this.seleTimeNoonArr= [],
			// 下午数组
			this.seleTimeAfternoonArr= [],
			// 晚上数组
			this.seleTimeNightArr= [],
			console.log('one启动')
			// this.getBySelectBusyHourSetting()
			this.isDisableTime()
		},
		updated() {
			console.log('one启动')
			this.isDisableTime()
		},
		methods:{
			isDisableTime() {
				console.log(this.$sun.getCurrentTime())
			for (let i = 0; i < this.morningData.length; i++) {
				let oldTime = this.xzTime + ' ' + this.morningData[i].time + ':00';
				console.log(oldTime, this.$sun.getNowDate())
				if (oldTime < this.$sun.getNowDate()) {
					this.$set(this.morningData[i], 'isDisable', true);
			
				}
			
			}
			for (let i = 0; i < this.nightData.length; i++) {
			
			
				
				
				let oldTime = this.xzTime + ' ' + this.nightData[i].time + ':00';
				console.log(oldTime, this.$sun.getNowDate())
				if (oldTime < this.$sun.getNowDate()) {
					this.$set(this.nightData[i], 'isDisable', true);
				
				}
			
			}
			for (let i = 0; i < this.noonData.length; i++) {
			
				
			    
				let oldTime = this.xzTime + ' ' + this.noonData[i].time + ':00';
				console.log(oldTime, this.$sun.getNowDate())
				if (oldTime < this.$sun.getNowDate()) {
					this.$set(this.noonData[i], 'isDisable', true);
				
				}
			}
			for (let i = 0; i < this.afternoon.length; i++) {
			
				
				let oldTime = this.xzTime + ' ' + this.afternoon[i].time + ':00';
				console.log(oldTime, this.$sun.getNowDate())
				if (oldTime < this.$sun.getNowDate()) {
					this.$set(this.afternoon[i], 'isDisable', true);
				
				}
			
			}
				
			},
			async getBySelectBusyHourSetting() {
				if (uni.getStorageSync('timeSelectdArr').length) {
			
			
					this.submitArr = uni.getStorageSync('timeSelectdArr').map((item) => {
						const dateTimeString = item.service_time
			
						const parts = dateTimeString.split('T');
						// 获取日期部分
						const datePart = parts[0];
					
						// 获取时间部分并去掉末尾的"00"
						
						const timePart = parts[1].replace(/:00$/, '');
						return {
							datePart: datePart,
							timePart: timePart
						}
					})
					const filterTime = this.submitArr.filter((item) => {
						console.log(this.xzTime,item.datePart)
						return item.datePart == this.xzTime
					})
					console.log('----------------', filterTime)
					filterTime.forEach((item) => {
						this.morningData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeMorningArr.push(i.time)
							}
						})
						this.noonData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeNoonArr.push(i.time)
							}
						})
						this.afternoon.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeAfternoonArr.push(i.time)
							}
						})
						this.nightData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeNightArr.push(i.time)
							}
						})
					})
					this.combinedArrayFn() 
				} else {
					const result = await this.$http.get({
						url: this.$api.getBySelectBusyHourSetting,
						data: {
							technicianId: uni.getStorageSync('technicianId'),
						}
					});
					console.log(result)
					if (result.code == 200) {
						this.submitArr = result.data.map((item) => {
							const dateTimeString = item.service_time
			
							const parts = dateTimeString.split('T');
							// 获取日期部分
							const datePart = parts[0];
							this.xzTime = datePart
							// 获取时间部分并去掉末尾的"00"
							const timePart = parts[1].replace(/:00$/, '');
							return {
								datePart: datePart,
								timePart: timePart
							}
						})
					}
					// 取匹配 匹配到了就push进去
					this.submitArr.forEach((item) => {
						this.morningData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeMorningArr.push(i.time)
							}
						})
						this.noonData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeNoonArr.push(i.time)
							}
						})
						this.afternoon.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeAfternoonArr.push(i.time)
							}
						})
						this.nightData.forEach((i) => {
							if (item.timePart == i.time) {
								this.seleTimeNightArr.push(i.time)
							}
						})
					})
			
					console.log(this.submitArr.length)
					// if (this.submitArr.length == 30) {
					// 	this.isAllChecked = true
					// }
					this.combinedArrayFn() 
				}
			
			},
			// 数组合并
			combinedArrayFn() {
				const combinedArray = [...this.seleTimeMorningArr, ...this.seleTimeNoonArr, ...this
					.seleTimeAfternoonArr, ...this.seleTimeNightArr
				];
				this.submitArr = combinedArray.map((item) => {
					return {
						technicianId: uni.getStorageSync('technicianId'),
						serviceTime: this.xzTime + 'T' + item
					}
				})
				const uniqueArray = Array.from(new Set(this.submitArr.map(JSON
					.stringify))).map(JSON
					.parse);
				console.log(uniqueArray)
				uni.setStorageSync('busyHourSettingFour',uniqueArray)
				
			},
			// 上午
			seleTimeMorning(i, time) {
			
				if (this.seleTimeMorningArr.indexOf(time) != -1) {
					this.seleTimeMorningArr.splice(this.seleTimeMorningArr.indexOf(time), 1)
				} else {
					this.seleTimeMorningArr.push(time)
				}
				if (this.seleTimeMorningArr.length != 8) {
					this.isAllChecked = false
				}
			
				this.combinedArrayFn()
				if (this.submitArr.length == 30) {
					this.isAllChecked = true
				}
				const uniqueArray = Array.from(new Set(this.seleTimeMorningArr.map(JSON
					.stringify))).map(JSON
					.parse);
					this.seleTimeMorningArr=uniqueArray
				console.log(this.seleTimeMorningArr)
				// console.log(i, time)
				// this.morningIndex = i
			},
			// 中午
			seleTimeNoon(i, time) {
				if (this.seleTimeNoonArr.indexOf(time) != -1) {
					this.seleTimeNoonArr.splice(this.seleTimeNoonArr.indexOf(time), 1)
				} else {
					this.seleTimeNoonArr.push(time)
				}
				if (this.seleTimeNoonArr.length != 4) {
					this.isAllChecked = false
				}
				this.combinedArrayFn()
				if (this.submitArr.length == 30) {
					this.isAllChecked = true
				}
				const uniqueArray = Array.from(new Set(this.seleTimeNoonArr.map(JSON
					.stringify))).map(JSON
					.parse);
					this.seleTimeNoonArr=uniqueArray
				console.log(this.seleTimeNoonArr + '-------中午')
				// console.log(i, time)
				// this.morningIndex = i
			},
			// 下午
			seleTimeAfternoon(i, time) {
				if (this.seleTimeAfternoonArr.indexOf(time) != -1) {
					this.seleTimeAfternoonArr.splice(this.seleTimeAfternoonArr.indexOf(time), 1)
				} else {
					this.seleTimeAfternoonArr.push(time)
				}
				if (this.seleTimeAfternoonArr.length != 9) {
					this.isAllChecked = false
				}
				this.combinedArrayFn()
				if (this.submitArr.length == 30) {
					this.isAllChecked = true
				}
				
				const uniqueArray = Array.from(new Set(this.seleTimeAfternoonArr.map(JSON
					.stringify))).map(JSON
					.parse);
					this.seleTimeAfternoonArr=uniqueArray
				console.log(this.seleTimeAfternoonArr + '-------下午')
				// console.log(i, time)
				// this.morningIndex = i
			},
			// 晚上
			seleTimeNight(i, time) {
				if (this.seleTimeNightArr.indexOf(time) != -1) {
					this.seleTimeNightArr.splice(this.seleTimeNightArr.indexOf(time), 1)
				} else {
					this.seleTimeNightArr.push(time)
				}
				if (this.seleTimeAfternoonArr.length != 8) {
					this.isAllChecked = false
				}
				this.combinedArrayFn()
			
				if (this.submitArr.length == 30) {
					this.isAllChecked = true
				}
				
				const uniqueArray = Array.from(new Set(this.seleTimeNightArr.map(JSON
					.stringify))).map(JSON
					.parse);
					this.seleTimeNightArr=uniqueArray
				console.log(this.seleTimeNightArr + '-------晚上')
				// console.log(i, time)
				// this.morningIndex = i
			},
		},
		
		watch:{
			xzTimeFour: {
			  handler(val) {
			    console.log(val)
				if(val){
					this.xzTime=val
					this.getBySelectBusyHourSetting()
				}
					
			  },
			  immediate: false,
			  deep: true
			},
		}
		
	}
</script>

<style lang="less">
	
.sel-cls,
	.disable-cls ,
	.no-cls {
		margin: 0 20rpx 44rpx 0;
		font-size: 32rpx;
		width: 160rpx;
		height: 96rpx;
		border-radius: 20rpx;
	}
	
	.sel-cls {
		color: #0084fe;
		background: #e1edff;
	}
	
	.no-cls {
		color: #333;
		background: #f5f5f5;
	}
	.disable-cls {
		color: #1d1d1d;
		background: #e5e5e5;
	}

</style>